import {Box, Static, Button, Carousel} from '../components'
import {carouselBox} from '../styles/components'

const CarouselBox = () => (
    <Box height='40.625rem' bgColor='#ccc' style={{position: 'relative'}}>
        <Carousel autoplay effect="fade">
            <div className='img-box img1'>
                <div className='fade-up'>
                    <Box flex='flex' direction='column' align='flex-start'>
                        <Static label='全新的招聘系统' fontSize='3.25rem' color='#fff'/>
                        <Static label='共享资源，开启招聘的新世界' fontSize='1.75rem' color='#fff'/>
                    </Box>
                </div>
            </div>

            <div className='img-box img2'>
                <div className='fade-left'><Static label='共享职位' fontSize='3.25rem' color='#35c0c1' style={{textAlign:'left'}}/></div>
                <div className='fade-right'><Static label='企业之间共享资源，节约成本' fontSize='1.75rem' color='#fff' style={{textAlign:'left'}}/></div>
            </div>

            <div className='img-box img3'>
                <div className='fade-in'>
                    <Static label='共享简历 轻松找工作' fontSize='3.25rem' color='#daa715'/>
                    <Static label='企业推荐求职 / 个人推荐求职 / 自我推荐求职' fontSize='1.25rem' color='#a4addc'/>
                </div>
            </div>
        </Carousel>

        <style jsx>{carouselBox}</style>
    </Box>
)

export default CarouselBox